<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div class="clearfix">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-edit"
            style="float: right"
            @click="addClick(1, '0')"
            >添加菜单</el-button
          >
        </div>
        <el-table style="width: 100%" :data="tableData" row-key="id">
          <el-table-column label="菜单名称">
            <template slot-scope="{ row }">
              <i class="el-icon-folder-opened"></i>
              <span style="margin-left: 5px">{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限标识"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
          <el-table-column width="400px" label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                v-if="row.type === 1"
                size="small"
                @click="addClick(2, row.id)"
                >添加权限点</el-button
              >
              <el-button type="text" size="small">查看app权限</el-button>
              <el-button type="text" size="small" @click="setClick(row.id)"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="delClick(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-dialog :title="title" :visible="showDialog" @close="isQX">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="160px"
        >
          <el-form-item prop="name" label="权限名称">
            <el-input
              style="width: 70%"
              v-model="formData.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" label="权限标识">
            <el-input
              style="width: 70%"
              v-model="formData.code"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input
              style="width: 70%"
              v-model="formData.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业可见">
            <el-switch
              v-model="formData.enVisible"
              active-text="可见"
              active-value="1"
              inactive-text="不可见"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isQX">取 消</el-button>
          <el-button type="primary" @click="isOK">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { tranListToTreeData } from "@/utils";
import {
  getPermisson,
  getPermi,
  setPermi,
  addPermisson,
  delPermi,
} from "@/api/permisson";
export default {
  name: "per",
  data() {
    return {
      showDialog: false,
      tableData: [],
      formData: {
        name: "", // 名称
        code: "", // 标识
        description: "", // 描述
        type: "", // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: "", // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: "0", // 开启
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        code: [{ required: true, message: "标识不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    async getPermisson() {
      this.tableData = tranListToTreeData(await getPermisson(), "0");
    },
    // 删除
    async delClick(id) {
      try {
        await this.$confirm("确定删除吗？", "温馨提示");
        await delPermi(id);
        this.getPermisson();
        this.$message.success("删除成功");
      } catch (err) {
        console.log(err);
      }
    },
    // 新增
    addClick(type, pid) {
      // 访问权的type = 1 按钮操作的type = 2
      // pid 表示当前数据的父节点的标识
      this.formData.type = type;
      this.formData.pid = pid;
      this.showDialog = true;
    },
    // 编辑
    async setClick(id) {
      this.formData = await getPermi(id);
      this.showDialog = true;
    },
    // 确定
    async isOK() {
      try {
        await this.$refs.form.validate();
        if (this.formData.id) {
          await setPermi(this.formData);
        } else {
          await addPermisson(this.formData);
        }

        this.getPermisson();
        this.$message.success(this.title + "成功");
        this.showDialog = false;
      } catch (err) {
        console.log(err);
      }
    },
    // 取消
    isQX() {
      this.formData = {
        name: "", // 名称
        code: "", // 标识
        description: "", // 描述
        type: "", // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: "", // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: "0", // 开启
      };
      this.$refs.form.clearValidate();
      this.showDialog = false;
    },
  },
  computed: {
    title() {
      return this.formData.id ? "编辑权限" : "新增权限";
    },
  },
  created() {
    this.getPermisson();
  },
};
</script>

<style>
.el-table__header-wrapper{
  border-bottom: 2px solid #EBEEF5;
}
.el-card__header {
  padding-bottom: 0;
}
</style>
